<template>
    <div class="container">
        <Header></Header>
        <Header2></Header2>
        <br>
        <div>
            <el-row class="demo-avatar demo-basic">
                <!--头像-->
                <el-col :span="12" class="el-col-12">
                    <div class="demo-basic--circle">
                        <div class="block">
                            <el-avatar :size="120" :src="circleUrl"></el-avatar>
                        </div>
                    </div>

                    <!--个人中心面板-->
                    <el-menu
                            :default-active="activeIndex"
                            mode="horizontal"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="rgb(255,255,255)"
                            text-color="#606266"
                            active-text-color="#409EFF">
                        <el-menu-item class="link-1" v-for="(item, index) in navList"
                                      :key="i"
                                      :index="item.name"
                                      @click="item.currentEvent">
                                <span class="full-left ">
                            <i class="el-icon-menu el-icon-user"></i>
                            <span slot="title">{{ item.navItem }}</span>
                                </span>
                        </el-menu-item>
                    </el-menu>
                </el-col>

                <el-col :span="19" class="el-col-19 pull-right">
                    <InfoDetail v-show="info_show"></InfoDetail>
                    <securityCenter v-show="security_show"></securityCenter>
                    <watchHistory v-show="watch_show"></watchHistory>
                    <collectShowing v-show="collect_show"></collectShowing>
                </el-col>
            </el-row>
        </div>
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <Footer></Footer>
    </div>
</template>
<script>
    import Header from "../components/Header";
    import Header2 from "../components/Header2";
    import Footer from "../components/Footer";
    import InfoDetail from "../components/InfoDetail";
    import securityCenter from "../components/securityCenter";
    import watchHistory from "../components/watchHistory";
    import collectShowing from "../components/collectShowing";

    export default {
        name: "IoFo",
        data() {
            return {
                // circleUrl: "@/assets/image/",
                // defaultAvator: '/media/avatar/default.png',
                // circleUrl: `${this.$settings.base_url}${this.defaultAvator}`,
                circleUrl: '',
                // sizeList: ["large"],
                component_html: '',
                info_show: false,
                security_show: false,
                watch_show: false,
                collect_show: false,
                navList: [
                    {name: '/info/infoDetail', navItem: '个人信息', currentEvent: this.infoDetail},
                    {name: '/securityCenter', navItem: '安全中心', currentEvent: this.securityCenter},
                    {name: '/watchHistory', navItem: '观看历史', currentEvent: this.watchHistory},
                    {name: '/collectShowing', navItem: '收藏展示', currentEvent: this.collectShowing},
                    {name: '/logout', navItem: '退出', currentEvent: this.logout},
                ],
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                // console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                // console.log(key, keyPath);
            },
            // 个人信息
            infoDetail() {
                this.info_show = true;
                this.security_show = false;
                this.watch_show = false;
                this.collect_show = false;
            },

            // 安全中心
            securityCenter() {
                this.info_show = false;
                this.security_show = true;
                this.watch_show = false;
                this.collect_show = false;
            },

            // 观看历史
            watchHistory() {
                this.info_show = false;
                this.security_show = false;
                this.watch_show = true;
                this.collect_show = false;
            },

            // 收藏展示
            collectShowing() {
                this.info_show = false;
                this.security_show = false;
                this.watch_show = false;
                this.collect_show = true;
            },

            // 退出
            logout() {
                this.$swal({
                    text: '你确定要退出吗?',
                    confirmButtonText: '退出',
                    cancelButtonText: '取消'
                }).then((response) => {
                    // console.log('response:', response);
                    // 点击退出时: {value: true}
                    // 取消时: {dismiss: "cancel"}
                    if (response.value) {
                        this.$cookies.set('token', '');
                        this.$cookies.set('user_dict', '');
                        this.$router.push('/')
                    }
                });
            },
        },
        created() {
            // 获取用户头像
            let user_id = this.$cookies.get('user_dict').id;
            this.$axios.get(`${this.$settings.base_url}/useroperation/checkavatar/${user_id}/`).then(response => {
                this.circleUrl = response.data.avatar;
                // console.log('response.data:', response.data);
            });
            this.infoDetail();
        },
        components: {
            Header,
            Header2,
            Footer,
            InfoDetail,
            securityCenter,
            watchHistory,
            collectShowing,
        }
    }


</script>

<style>

    .full-left {

        padding: 10px;
    }

    .el-col-12 {
        width: 20% !important;


    }

    .link-1:hover {
        background-color: rgba(103, 194, 58, 0.3) !important;
        color: rgba(103, 194, 58, 0.3) !important;

    }

    .link-1 {
        height: 80px !important;
        font-size: 20px !important;
        line-height: 56px;
        position: relative;
        -webkit-box-sizing: border-box;
        width: 227px !important;


        white-space: nowrap;
        list-style: none;
    }


    .block {
        background-color: whitesmoke;
    }
</style>